<template>
  <div class="copy-view">
    <input type="text" v-model="myLotterNum" placeholder="请输入要复制的内容">
    <div class="flex-middle-x layout-flex-justify-content_space-between">
      <button  @click="actionClickReset">重置</button>
      <button class="btn-message" @click="actionClickCopy">{{copyTitle}}</button>
    </div>
  </div>
</template>
<script>
  import Clipboard from 'clipboard';
  export default {
    name:'',
    data(){
      return {
        copyTitle:'点击复制',
        myLotterNum:null
      }
    },
    methods:{
      actionClickCopy(){
        this.copyTitle = '复制成功';
      },
      actionClickReset(){
        this.myLotterNum = null;
        this.copyTitle = '点击复制';
      }
    },
    mounted: function(){
      /* eslint-disable */
      var clipboard = new Clipboard('.btn-message', {
        text: () => {
          return '' + this.myLotterNum + '';
        }
      });
      clipboard.on('success', function(e) {
        console.log(e);
      });
      clipboard.on('error', function(e) {
        console.log(e);
      });
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped="">
  .copy-view{
    input{
      width:100%;
      height:10%;
      position: fixed;
      top:-5rem;left:0;right:0;bottom:0;
      margin:auto;
      font-size:0.5rem;
      outline: none;
      text-align: center;
    }
    div{
      width:100%;
      height:10%;
      position: fixed;
      top:0;left:0;right:0;bottom:0;
      padding:0 10%;
      margin:auto;
      button{
        width:40%;
        height:100%;
        border:none;
        outline: none;
        font-size:0.3rem;
        color:$color-4;
        background:$color-icbcRed;
      }
    }
  }
</style>
